<template>
    <!-- 3.所有页面添加骨架屏效果 -->
  <van-skeleton title avatar :row="3" :loading="loading1">
  <div>
    <NavBar title="分类" />
    <!-- 10.实现商品分类页面排版，接口与数据使用mock
    11.点击左侧分类高亮展示，右侧切换对应商品，默认展示第一个分类 -->
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="100vh"
      :items="items"
    >
      <template #content>
        <!-- 12.右侧商品列表实现下拉刷新
        13.右侧商品列表实现触底加载下一页数据 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="re" v-for="item in gridList" :key="item.id">
              <p>热门分类<span>查看更多></span></p>
              <!-- 15.点击商品卡片跳转到商品详情，使用动态路由方式传递商品ID -->
              <router-link :to="'/detail/' + item.id">
                <van-grid :column-num="3" :gutter="5" square :border="false">
                  <van-grid-item
                    v-for="value in 9"
                    :key="value"        
                  >
                  <!-- 14.商品列表使用自定义指令实现图片懒加载，必须自定义实现，不能使用UI库自带的 -->
                  <img :src="item.img" v-lazy alt="">
                  <span>{{ item.title }}</span>
                  </van-grid-item>
                </van-grid>
                <hr style="color:darkgrey"/>
              </router-link>
            </div>
            
          </van-list>
        </van-pull-refresh>

        
      </template>
    </van-tree-select>
  </div>
  </van-skeleton>
</template>
<script setup>
import { ref,onMounted } from "vue";
import axios from "axios";

const activeIndex = ref(0);
const items = [
  { text: "护肤" },
  { text: "彩妆" },
  { text: "个人护理" },
  { text: "保健品" },
  { text: "母婴" },
  { text: "包包" },
  { text: "护肤" },
  { text: "彩妆" },
  { text: "个人护理" },
  { text: "保健品" },
  { text: "母婴" },
  { text: "包包" },
  { text: "护肤" },
  { text: "彩妆" },
];
const gridList = ref([]);
axios.get("/getClassify").then((res) => {
  //   console.log(res);
  gridList.value = res.data.list;
});

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      gridList.value = [];
      refreshing.value = false;
    }

    axios.get("/getClassify").then((res) => {
      //   console.log(res);
      gridList.value = gridList.value.concat(res.data.list);
    });
    loading.value = false;

    if (gridList.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const loading1 = ref(true);
onMounted(() => {
  setInterval(() => {
    loading1.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
.van-grid{
  img{
width: 50px;
height: 50px;
  }
}
.re {
  margin: 0 10px;
  span {
    float: right;
    font-size: 12px;
    color: #949292;
  }
}
.van-list {
  margin-bottom: 40px;
}
</style>